<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<style>
			body {
				margin: 10px;
				background: #FFFFFF;
			}

			.demo-carousel {
				height: 200px;
				line-height: 200px;
				text-align: center;
			}

			.layui-card-header {
				background: #01AAED;
				color: #fff
			}
		</style>
	</head>
	<body>

		<div class="layui-row">
			<div class="layui-col-md3">
				<div id="test12" class="demo-tree-more"></div>
			</div>
			<div class="layui-col-md9">
				<div class="layui-col-md12">
				
					<div class="layui-card-header">翠屏城小区1号泵房</div>
					<div class="layui-card-body">
						<div class="layui-col-xs12">
							<div id="press" style="height: 300px;margin-top: 20px;"></div>
						</div>
					</div>
				</div>
				<div class="layui-col-md12" style="margin-top: 40px;">
					<div class="layui-row">
						<div class="layui-col-md3">
							<div id="inPress" style="height: 300px;margin-top: 20px;"></div>
						</div>
						<div class="layui-col-md3" >
							<div id="outPress" style="height: 300px;margin-top: 20px;"></div>
						</div>
						<div class="layui-col-md3">
							<div id="hightPress" style="height: 300px;margin-top: 20px;"></div>
						</div>
						<div class="layui-col-md3">
							<div id="supperHightoutPress" style="height: 300px;margin-top: 20px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>


	</body>
	<script src="../../../layui/layui.js"></script>
	<script src="../../libs/echarts/echarts.min.js"></script>
	<script src="../../libs/echarts/echartsTheme.js"></script>
	<script>
		layui.config({
			version: '1572350921010' //为了更新 js 缓存，可忽略
		});

		layui.use(['tree', 'util'], function() {
			var tree = layui.tree,
				layer = layui.layer,
				util = layui.util;
			var app = {};
			//模拟数据
			data = [{
				title: '南疆',
				id: 1,
				field: 'name1',
				checked: true,
				spread: true,
				children: [{
						title: '翠屏城小区',
						id: 3,
						field: '',
						spread: true,
						children: [{
							title: '翠屏城1号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城2号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城3号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城4号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城5号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城6号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城7号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '世纪花园小区',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '世纪花园1号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园2号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园3号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园4号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园5号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '奧斯伯恩庄园',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '奧斯伯恩1号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩2号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩3号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩4号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '碧水湾小区',
						id: 20,
						field: '',
						children: [{
							title: '碧水湾1号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾2号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾3号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾4号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '秣陵福源小区',
						id: 20,
						field: '',
						children: [{
							title: '秣陵福源1号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源2号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源3号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源4号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源5号泵房',
							id: 20,
							field: ''
						}]
					}
				]
			}]

			//基本演示
			tree.render({
				elem: '#test12',
				data: data,
				showCheckbox: true //是否显示复选框
					,
				id: 'demoId1',
				isJump: true //是否允许点击节点时弹出新窗口跳转
					,
				click: function(obj) {
					var data = obj.data; //获取当前点击的节点数据
					layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
				}
			});

			//按钮事件
			util.event('lay-demo', {
				getChecked: function(othis) {
					var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

					layer.alert(JSON.stringify(checkedData), {
						shade: 0
					});
					console.log(checkedData);
				},
				setChecked: function() {
					tree.setChecked('demoId1', [12, 16]); //勾选指定节点
				},
				reload: function() {
					//重载实例
					tree.reload('demoId1', {

					});

				}
			});
		
			
			
			
			 var myCharts = echarts.init(document.getElementById('press'), myEchartsTheme);
			 option = {
			     title: {
			         text: '动态数据',
			     },
			     tooltip: {
			         trigger: 'axis',
			         axisPointer: {
			             type: 'cross',
			             label: {
			                 backgroundColor: '#283b56'
			             }
			         }
			     },
			     legend: {
			         data:['压力', '供水量']
			     },
			     toolbox: {
			         show: true,
			         feature: {
			             dataView: {readOnly: false},
			             restore: {},
			             saveAsImage: {}
			         }
			     },
			     dataZoom: {
			         show: false,
			         start: 0,
			         end: 100
			     },
			     xAxis: [
			         {
			             type: 'category',
			             boundaryGap: true,
			             data: (function (){
			                 var now = new Date();
			                 var res = [];
			                 var len = 10;
			                 while (len--) {
			                     res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
			                     now = new Date(now - 2000);
			                 }
			                 return res;
			             })()
			         },
			         {
			             type: 'category',
			             boundaryGap: true,
			             data: (function (){
			                 var res = [];
			                 var len = 10;
			                 while (len--) {
			                     res.push(10 - len - 1);
			                 }
			                 return res;
			             })()
			         }
			     ],
			     yAxis: [
			         {
			             type: 'value',
			             scale: true,
			             name: '压力',
			             max: 30,
			             min: 0,
			             boundaryGap: [0.2, 0.2]
			         },
			         {
			             type: 'value',
			             scale: true,
			             name: '供水量',
			             max: 1200,
			             min: 0,
			             boundaryGap: [0.2, 0.2]
			         }
			     ],
			     series: [
			         {
			             name:'压力',
			             type:'bar',
			             xAxisIndex: 1,
			             yAxisIndex: 1,
			             data:(function (){
			                 var res = [];
			                 var len = 10;
			                 while (len--) {
			                     res.push(Math.round(Math.random() * 1000));
			                 }
			                 return res;
			             })()
			         },
			         {
			             name:'供水量',
			             type:'line',
			             data:(function (){
			                 var res = [];
			                 var len = 0;
			                 while (len < 10) {
			                     res.push((Math.random()*10 + 5).toFixed(1) - 0);
			                     len++;
			                 }
			                 return res;
			             })()
			         }
			     ]
			 };
			 
			 app.count = 11;
			 setInterval(function (){
			     axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
			 
			     var data0 = option.series[0].data;
			     var data1 = option.series[1].data;
			     data0.shift();
			     data0.push(Math.round(Math.random() * 1000));
			     data1.shift();
			     data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
			 
			     option.xAxis[0].data.shift();
			     option.xAxis[0].data.push(axisData);
			     option.xAxis[1].data.shift();
			     option.xAxis[1].data.push(app.count++);
			 
			     myCharts.setOption(option);
			 }, 2100);
			
			var myCharts2 = echarts.init(document.getElementById('inPress'), myEchartsTheme);
			option2 = {
				title: {
				    text: '尽口压力',
					x:'center'
				},
			    tooltip : {
			        formatter: "{a} <br/>{b} : {c}%"
			    },
			    toolbox: {
			        feature: {
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    series: [
			        {
			            name: 'MPa',
			            type: 'gauge',
			            detail: {formatter:'{value}'},
			            data: [{value: 50, name: 'MPa'}]
			        }
			    ]
			};
			
			setInterval(function () {
			    option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
			    myCharts2.setOption(option2, true);
			},2000);
			
			var myCharts3 = echarts.init(document.getElementById('outPress'), myEchartsTheme);
			option3 = {
				title: {
				    text: '出口压力',
					x:'center'
				},
			    tooltip : {
			        formatter: "{a} <br/>{b} : {c}%"
			    },
			    toolbox: {
			        feature: {
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    series: [
			        {
			            name: 'MPa',
			            type: 'gauge',
			            detail: {formatter:'{value}'},
			            data: [{value: 50, name: 'MPa'}]
			        }
			    ]
			};
			
			setInterval(function () {
			    option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
			    myCharts3.setOption(option3, true);
			},2000);
			
			var myCharts4 = echarts.init(document.getElementById('hightPress'), myEchartsTheme);
			option4 = {
				title: {
				    text: '高压腔压力',
					x:'center'
				},
			    tooltip : {
			        formatter: "{a} <br/>{b} : {c}%"
			    },
			    toolbox: {
			        feature: {
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    series: [
			        {
			            name: 'MPa',
			            type: 'gauge',
			            detail: {formatter:'{value}'},
			            data: [{value: 50, name: 'MPa'}]
			        }
			    ]
			};
			
			setInterval(function () {
			    option4.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
			    myCharts4.setOption(option4, true);
			},2000);
			
			var myCharts5 = echarts.init(document.getElementById('supperHightoutPress'), myEchartsTheme);
			option5 = {
				title: {
				    text: '超高压腔压力',
					x:'center'
				},
			    tooltip : {
			        formatter: "{a} <br/>{b} : {c}%"
			    },
			    toolbox: {
			        feature: {
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    series: [
			        {
			            name: 'MPa',
			            type: 'gauge',
			            detail: {formatter:'{value}'},
			            data: [{value: 50, name: 'MPa'}]
			        }
			    ]
			};
			
			setInterval(function () {
			    option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
			    myCharts5.setOption(option5, true);
			},2000);
			// 窗口大小改变事件
			window.onresize = function () {
			    myCharts.resize();
			    myCharts2.resize();
			    myCharts3.resize();
			    myCharts4.resize();
				myCharts5.resize();
			};
		});
		
		
			
	</script>
</html>
